<template>
  <Layout desc="request中使用customRef实现全局loading">
    <div class="text-center mt-40">
      <el-card v-loading="loading" class="p-10 mb-10">{{ name }} </el-card>
      <el-button type="primary" @click="fetchData">发起请求</el-button>
    </div>
  </Layout>
</template>

<script setup lang="ts">
import { getAllUser } from '@/api'
import { delay } from '@/utils/delay'
import { loading } from '@/utils/request'
import { ElMessage } from 'element-plus'

const name = ref('')

const fetchData = async () => {
  const { user } = await getAllUser()
  name.value = user.name
  ElMessage.success('请求 接口1 成功')
  await delay(2000)
  const { user: user1 } = await getAllUser()
  name.value = user1.name
  ElMessage.success('请求 接口2 成功')
}
</script>

<style scoped lang="scss"></style>
